import React, { useState } from 'react';
import ReactGridLayout, { Layout, Responsive } from 'react-grid-layout';

// 假设这是你的布局数据
const initialLayout = [
  { i: 'w1', x: 0, y: 0, w: 2, h: 2, static: false },
  { i: 'w2', x: 2, y: 0, w: 1, h: 2, static: false },
  { i: 'w3', x: 3, y: 0, w: 1, h: 2, static: false }
];

const Page=()=> {
  // 使用useState来管理布局
  const [layout, setLayout] = useState(initialLayout);

  // 当布局发生变化时更新state
  const onLayoutChange = (newLayout:any) => {
    setLayout(newLayout);
  };

  return (
    <div style={{ height: '600px', width: '100%' }}>
      <Responsive
        layouts={{ lg: layout, md: layout, sm: layout, xs: layout, xxs: layout }}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        rowHeight={150}
        onBreakpointChange={(breakpoint, cols) => console.log(breakpoint, cols)}
        onLayoutChange={onLayoutChange}
      >
        {/* 使用Layout组件渲染每个网格项 */}
        {layout.map((item) => (
          <div key={item.i} data-grid={item}>
            <div style={{ background: 'lightblue', padding: '20px' }}>
              Item {item.i}
            </div>
          </div>
        ))}
      </Responsive>
    </div>
  );
}

export default Page;